<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>NeptuneShop</title>
<style>
	.pageBox{
		width:500px;
		height:60px;
		margin:auto;
	}
	.footer{
		height:60px;
		width:80%;
		background-color:#FFFFFF;
		position:fixed;
		bottom:0;
	}
	.block{
		width:200px;
		display:inline-block;
		float:right;
	}
	.text_box{
		width:40px;
		height:25px;
		font-size:20px;		
	}
	.plus{
		width:30px;
		height:30px;
	}
	.reduce{
		width:30px;
		height:30px;
	}
	.price{
		color:red;
	}
	.stock{
		color:#7B7B7B;
	}
</style>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body style="background:#F5F5F5">
<form class="layui-form" id="form1" action="/pay" method="post">
<div class="layui-container"> 
  <div class="layui-row">
    <!-- logo区域 -->
    <div class="layui-col-md3">  
		  	<div class="layui-card" style="height:200px;">
		  		<img src="../image/logo/white_logo.svg" alt="图不见咯" height="190px" width="250px">		  		
		  	</div>	 				 		  			    							 				  			    	 			        		        	          		 
    </div>
    <!-- 购物车 -->
    <div class="layui-col-md6">  
		  	<div class="layui-card" style="height:200px;">
		  		<div class="layui-card-header" style="align:center;">我的订单</div>
			  		<div class="layui-card-body">
				  		<div class="layui-form-item">			  	
					  		<a class="layui-btn layui-btn-warm" href="/shop/index" id="index" style="font-size:20px;width:100%;height:18%;"><i class="layui-icon layui-icon layui-icon-home"></i>返回首页</a>			  	
					  	</div>
				  	</div>
		  	</div>	 				 		  			    							 				  			    	 			        		        	          		 
    </div>
    <!-- 个人信息区域 -->
    <div class="layui-col-md3" align="center">
    	<div class="layui-card" style="height:200px;">
		  <div class="layui-card-header">个人信息</div>
		  <div class="layui-card-body">
			    <div style="width: 100px;height: 100px; border-radius:50px;overflow: hidden;border:2px solid #E6E6FA;">
	      			<img id="user_img" src="../image/head/01f1bd5d19f28ba8012076404361ce.jpg@1280w_1l_2o_100sh.jpg" alt="" width="100px" height="100px">
	      			<input type="hidden" id="userid" name="userid" th:value="${session.id}">
	      		</div>     
	          	<a href="##" id="user_name">hi！你好</a>          	          
		  </div>
		</div>                
    </div>
  </div>
  <div class="layui-row">  	  	
  	<!-- 表格区域 -->
    <div class="layui-col-md12" style="height:400px;">     
	  	<table id="myOrder_dataTable" class="layui-table" lay-filter="myOrder_dataTable">	  		
	  	</table>
	  	<div id="myOrder_page" class="pageBox"></div>	  	
	  	<script type="text/html" id="myOrder_tool">
			<input type="button" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="kan" id="kan" value="查看">
		</script>
    </div>  	
 </div>
</div>
</form>
<script src="../layui/layui.js"></script>
<script src="../js/user.js"></script>
<script type="text/javascript">
layui.use(['layer','jquery','form','laypage','table','element','laytpl'],function(){
	var layer=layui.layer;
	var $=layui.jquery;
	var form=layui.form;
	var laypage=layui.laypage;
	var table=layui.table;						
	var element=layui.element;	
	var laytpl=layui.laytpl;
	
	$.ajax({					//为头像和用户名赋值
		url:'/user/get_user',
		//dataType:'json',
		type:'get',			
		success:function(data){
			document.getElementById("user_img").src=data.image;
			document.getElementById("user_name").innerHTML=data.name;
		}
	});
					
	$(function(){
		getData(0);
	})
	function getData(pageStart){		
		table.render({
			elem:'#myOrder_dataTable'
			,url:'/myOrder/getMyOrderBtween'
			,method:"get"
			,where:{
				pageStart:pageStart,
				pageSize:10
			}
			,parseData:function(res){				
				console.log(res)
				return{
					"code":0
					,"msg":""
					,"count":res.rowSize
					,"data":res.data
					,"curr":res.pageStart
					,"limit":res.limit
				}
			}				
			,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				title: '提示'
			    ,layEvent: 'LAYTABLE_TIPS'
			    ,icon: 'layui-icon-tips'
			 }]
			//,cellMinWidth:100
			,cols:[
		    		[
				      {field:'orderId', title:'订单编号', width:240, fixed: 'left', unresize: true, sort: true}
				      ,{field:'userId', title:'会员编号', width:140}	      				      
				      ,{field:'orderTotalPrice', title:'总价', width:120,sort:true}
				      ,{field:'orderState', title:'状态' ,width:120}
				      ,{field:'createTime', title:'创建时间', width:200, sort: true}	
				      ,{fixed: 'right', title:'操作', width: 250, align:'center', toolbar: '#myOrder_tool'}
		   			]
		    	]
			,done:function(res,curr,count){
				console.log(res);
				laypage.render({
					elem:'myOrder_page'
					,count:res.count
					,limit:res.limit
					,layout: ['count','prev','page','next','skip']
					,curr:res.curr/10+1
					,jump:function(obj,first){//触发分页后的回调
						if(!first){//点击跳转触发函数自身，并传递当前页：obj.curr							
							res.pageStart=obj.limit*(obj.curr-1);
							console.log(res.pageStart);
							getData(res.pageStart);														
						}//if
					}//jump function
				});					
			}
		});		
	}//function				
	//监听行工具事件
	table.on('tool(myOrder_dataTable)', function(obj){ //注：tool 是工具条事件名，goods_toolBox 是 table 原始容器的属性 lay-filter="对应的值"
		var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    if(layEvent === 'delete'){
	    	layer.confirm('真的删除行么', function(index){
	    		deleteOrderById(data.orderId);
 		        layer.close(index);		
 		       	getData(0);
 		      });
	    } 	    
	    else if(layEvent==='kan'){
	    	kanDetailById(data.orderId);
	    }	    	
	  });
	
	function deleteOrderById(orderId){
		$.ajax({
			type:'post'
			,url:'../myOrder/deleteOrderById?orderId='+orderId
			,success:function(){
				var index = parent.layer.getFrameIndex(window.name); 
				parent.layer.close(index);
			}
			,error:function(){
				alert("异常");
			}
		});
	}
	
	function kanDetailById(orderId){
		layer.open({
			type:2
			,title:"订单详情"
			,content:'../myOrder/getDetailById?orderId='+orderId
			,area:['300px','400px']
			//,end:function(){
			//	getData(0);
			//}
		});
	}
});
</script>
</body>
</html>